<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div class="wrap">
    <Tabs2 :data="['基础属性', '条件设置']" @on-tab="handleTab" :height="40" :tab="tab" />
    <BaseInfo v-if="tab === 0" :item="item" @on-item="handleBaseInfo2" />

    <div v-if="tab === 1" class="tab">
      <template v-for="item in conditionsSelected" :key="item.id" >
        <Item :item="item" @on-del="handleDel" @on-save="handleSave"></Item>
      </template>
      <div class="padding" style="padding-top: 16px">
        <el-button @click="dialogFormVisible = true" type="primary" round size="medium" icon="el-icon-plus"
          >添加条件</el-button
        >
      </div>
    </div>

    <el-dialog append-to-body title="选择条件" width="420px" v-model="dialogFormVisible">
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="item in conditions" :key="item.id" :label="item.prop">{{ item.label }}</el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancelBranch">取 消</el-button>
        <el-button type="primary" @click="handleAddBranchs">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mixinTabs } from '../mixins'
import taskAPI from '@/framework-code/api/task'
import _ from 'lodash'
import { Item } from './branch/index'
import { branchType } from '@/framework-code/utils/constants'

const defItems = [
  {
    dataType: branchType.startUser,
    label: '发起人',
    prop: 'startUser'
  },
  {
    dataType: branchType.role,
    label: '角色',
    prop: 'startRole'
  },
  {
    dataType: branchType.org,
    label: '机构',
    prop: 'startOrg'
  }
]
export default {
  mixins: [mixinTabs],
  components: {
    Item
  },
  data() {
    return {
      conditions: [...defItems],
      conditionsSelected: [defItems[0]],
      dialogFormVisible: false,
      checkList: ['startUser']
    }
  },
  watch: {
    dialogFormVisible(val) {
      if (val) {
        const checkList = []
        this.conditionsSelected.map((item) => {
          checkList.push(item.prop)
        })
        console.log(checkList)
        this.checkList = checkList
      }
    }
  },
  mounted() {
    const procId = this.procId
    if (procId) {
      this.fieldBranchCondition(procId)
    }
    console.log(this.item)
  },
  methods: {
    handleBaseInfo2(item) {
      this.$emit('on-item', item, true)
    },
    async fieldBranchCondition(procId) {
      try {
        const { code, data } = await taskAPI.apiFieldBranchCondition({ procId })
        this.conditions = _.concat(this.conditions, data.data.data)
        this.editSetData()
      } catch ({ msg }) {
        this.$message.error(msg)
      }
    },
    editSetData() {
      if (this.item?.properties?.branchConditionList) {
        const { branchConditionList } = this.item.properties
        if (branchConditionList.length) {
          const fieldProps = []
          branchConditionList.map((item) => {
            fieldProps.push(item.fieldProp)
          })
          const had = _.filter(this.conditions, (item) => {
            return fieldProps.includes(item.prop)
          })
          this.conditionsSelected = had

          if (this.conditionsSelected.length) {
            this.conditionsSelected.map((item) => {
              const {
                // dataType,
                prop
              } = item
              branchConditionList.map((objV) => {
                if (objV.fieldProp === prop) {
                  const { conditionValue, fieldName, fieldProp, numberCondition } = objV

                  if (conditionValue) {
                    item.conditionValue = JSON.parse(conditionValue)
                  }
                  if (fieldName) {
                    item.label = fieldName
                  }
                  if (fieldProp) {
                    item.prop = fieldProp
                  }
                  if (numberCondition) {
                    item.numberCondition = numberCondition
                  }
                }
              })
            })
          }
        }
      }
    },
    handleCancelBranch() {
      const had = this.conditionsSelected
      const props = []
      if (had.length) {
        had.map((item) => {
          props.push(item.prop)
        })
      }
      this.dialogFormVisible = false
      this.checkList = props
    },
    handleAddBranchs() {
      const selected = this.conditions.filter((item) => {
        return this.checkList.includes(item.prop)
      })
      this.conditionsSelected = selected
      this.dialogFormVisible = false
    },
    handleDel({ prop }) {
      const had = this.conditionsSelected.filter((item) => item.prop !== prop)
      const props = []
      if (had.length) {
        had.map((item) => {
          props.push(item.prop)
        })
      }

      this.conditionsSelected = had
      this.checkList = props

      const branchConditionList = this.item.properties.branchConditionList
      const i = _.findIndex(branchConditionList, { fieldProp: prop })
      if (i >= 0) {
        this.item.properties.branchConditionList.splice(i, 1)
      }
    },
    handleSave(item) {
      this.genBranchConditionList()
      this.setItem(item)
    },
    setItem(item) {
      const { branchConditionList } = this.item.properties

      if (branchConditionList.length) {
        const index = _.findIndex(branchConditionList, { fieldProp: item.fieldProp })
        if (index >= 0) {
          const current = branchConditionList[index]
          this.item.properties.branchConditionList[index] = {
            ...current,
            ...item
          }
        } else {
          this.item.properties.branchConditionList.push(item)
        }
      } else {
        this.item.properties.branchConditionList.push(item)
      }
      this.$emit('on-item', this.item)
    },
    genBranchConditionList() {
      if (!this.item?.properties) {
        this.item.properties = {}
      }

      if (!this.item?.properties?.branchConditionList) {
        this.item.properties.branchConditionList = []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import './pop.scss';
</style>
